<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
          <input type="text" v-model.number="num1">
          <input type="text" v-model.number="num2">
          <!-- 用的时候就当普通属性来用 -->
          <!-- 普通属性可以怎么用，计算属性就能怎么用 -->
          <span>结果： {{ sum }}</span>

          <p>{{ sum }}</p>
          <p>{{ sum }}</p>
          <p>{{ sum }}</p>
          <p>{{ sum }}</p>
          <p>{{ sum }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            num1: 0,
            num2: 0
          }
        },
        computed: {
            // 本质是函数
            // 计算属性有缓存机制
            // 第一次会调用计算属性，调用后会得到一个结果，计算属性会自动把这个结果缓存起来
            // 后面每次都是直接从缓存里取的
            // 什么时候会重现调用呢？
            //    当计算属性里的任何一个依赖项发生变化，就会再来重新调用计算属性，
            //    得到一个新的结果，再把新的结果缓存起来

            // 计算属性里用到的别的数据，都叫依赖项
            sum () {
                console.log('sum被调用了')
                return this.num1 + this.num2
            }
        },
      })
    </script>
  </body>
</html>